<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <link rel="icon" href="CX.png" type="image/png">
    <link rel="stylesheet" href="shopping car.css">
</head>
<body>
    <header>
        <div class="container-1">
            <p onclick="if (window.opener && !window.opener.closed) {
                window.close();
            } else if (document.referrer) {
                location.href = document.referrer;
            } else {
                window.open('index.html', '_self');
            }">←&nbsp;&nbsp;&nbsp;返回</p>
        </div>  
        <div class="container">            
            <div class="logo">
                <img class="CX" src="CX.png" alt="">
                <img class="CXCN" src="CXCN.png" alt="">
            </div>
            <div class="Input">
                <input type="text" id="searchInput" placeholder="商品、商家、品牌等">
                <button type="submit">搜 索</button>    
            </div>
        </div>
    </header>
    <div class="content">
        <div class="container">
            <div class="header">
                <p>全部商品&nbsp;&nbsp;&nbsp;&nbsp;999+</p>
                <div class="section">
                    <p>配送至</p>
                    <select name="" id="select">
                        <option value="">岑城镇</option>
                        <option value="">归义镇</option>
                        <option value="">马路镇</option>
                        <option value="">南渡镇</option>
                        <option value="">水汶镇</option>
                        <option value="">大隆镇</option>
                        <option value="">大业镇</option>
                        <option value="">筋竹镇</option>
                        <option value="">梨木镇</option>
                        <option value="">波塘镇</option>
                        <option value="">三堡镇</option>
                        <option value="">糯垌镇</option>
                        <option value="">安平镇</option>
                        <option value="">城谏镇</option>
                    </select>
                </div>
            </div>
            <div class="shangpin">
                <table width="100%" >
                    <!-- 明确表头部分 -->
                    <thead>
                        <tr style="background-color: #E6E6E6;">
                            <th>商品</th><th>单价</th><th>数量</th><th>总价</th>
                        </tr>
                    </thead>
                    <!-- 明确表格主体部分 -->
                    <tbody>
                        <!-- 这里会被 JavaScript 动态生成的内容填充 -->
                    </tbody>
                </table>
            </div>
            <footer>
                <div class="container">
                    <table style="width: 100%;height: 60px;">
                        <tr>
                            <td colspan="3" style="color: #109601;" onclick="clearCart()">清理购物车</td>
                            <td align="right">总金额</td>
                            <!-- 添加一个 id 为 totalPrice 的 td 用于显示总金额，使用 span 标签设置样式 -->
                            <td id="totalPrice" align="center" style="width: 100px;"><span style="color: red; font-weight: bold;">0.0元</span></td>
                            <td style="width: 100px;"><button style="width: 100%;height: 100%;" onclick="window.open('dingdan.html','_blank')">结&nbsp;算</button></td>
                        </tr>
                    </table>    
                </div>
            </footer>
        </div>
    </div>
</body>
</html>

<script>
    // 从本地存储加载购物车数据
    let cartItems = JSON.parse(localStorage.getItem('cartItems')) || [];
    let totalPrice = 0;
    
    // 更新购物车数据到本地存储
    function updateCartStorage() {
        localStorage.setItem('cartItems', JSON.stringify(cartItems));
    }
    
    // 更新商品数量
    function updateQuantity(index, change) {
        cartItems[index].quantity += change;
        
        // 如果数量小于1则移除商品
        if (cartItems[index].quantity < 1) {
            cartItems.splice(index, 1);
        }
        
        updateCartStorage();
        generateCartTable();
    }
    
    // 生成购物车表格内容
    function generateCartTable() {
        const tableBody = document.querySelector('.shangpin table tbody');
        tableBody.innerHTML = '';
        totalPrice = 0;
        
        cartItems.forEach((item, index) => {
            const itemTotal = item.price * item.quantity;
            const row = document.createElement('tr');
            row.innerHTML = `
                <td class="sp-1" align="left">
                    <img src="${item.image}" alt="">
                    <p>${item.name}</p>
                </td>
                <td align="center" width="100px">${item.price.toFixed(1)}元</td>
                <td align="center" width="100px">
                    <button style="width: 20px;" onclick="updateQuantity(${index}, -1)">-</button>
                    ${item.quantity}
                    <button style="width: 20px;" onclick="updateQuantity(${index}, 1)">+</button>
                </td>
                <td align="center" width="100px">${itemTotal.toFixed(1)}元</td>
            `;
            tableBody.appendChild(row);
            
            // 添加分隔线
            const separator = document.createElement('tr');
            separator.innerHTML = `<td colspan="4" style="border-bottom: 2px solid #109601;"></td>`;
            tableBody.appendChild(separator);
            
            totalPrice += itemTotal;
        });
        
        // 更新总价显示，注意操作 span 元素
        const totalPriceElement = document.getElementById('totalPrice').querySelector('span');
        totalPriceElement.textContent = `${totalPrice.toFixed(1)}元`;
    }
    
    // 页面加载时生成购物车表格
    document.addEventListener('DOMContentLoaded', generateCartTable);
    
    // 清空购物车
    function clearCart() {
        cartItems = [];
        updateCartStorage();
        generateCartTable();
    }
</script>